import Bezier from "./Bezier";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

    @property(cc.Prefab)
    btn: cc.Prefab = null;
    @property(cc.Prefab)
    posNode: cc.Prefab = null;
    @property(cc.Prefab)
    pathNode: cc.Prefab = null;
    @property(cc.Node)
    Label: cc.Node = null;
    @property(cc.Node)
    edit0: cc.Node = null;
    @property(cc.Node)
    edit1: cc.Node = null;
    @property(cc.Node)
    edit2: cc.Node = null;
    @property(cc.Node)
    btnDelete: cc.Node = null;
    private _posNode: cc.Node[] = []
    private _pathTagNodes: cc.Node[] = []
    private _paths = [[{ "x": -531.5, "y": 257 }, { "x": -422.5, "y": -28 }, { "x": -39.5, "y": 70 }, { "x": 233.5, "y": 1 }, { "x": 565.5, "y": -97 }], [{ "x": -499.5, "y": 171 }, { "x": -469.5, "y": 17 }, { "x": -285.5, "y": 78 }, { "x": -43.5, "y": 83 }, { "x": 318.5, "y": 80 }, { "x": -9.5, "y": -218 }, { "x": 200.5, "y": -199 }, { "x": 276.5, "y": -113 }, { "x": 511.5, "y": -83 }], [{ "x": -499.5, "y": 288 }, { "x": -403.5, "y": 71 }, { "x": 351.5, "y": 81 }, { "x": 100.5, "y": 24 }, { "x": -542.5, "y": -82 }, { "x": 329.5, "y": -44 }, { "x": 500.5, "y": -137 }], [{ "x": -497.5, "y": 215 }, { "x": -328.5, "y": -14 }, { "x": -488.5, "y": -275 }, { "x": -92.5, "y": -50 }, { "x": 246.5, "y": 73 }, { "x": 605.5, "y": -149 }, { "x": 286.5, "y": -346 }], [{ "x": -544.5, "y": 305 }, { "x": -499.5, "y": 133 }, { "x": -272.5, "y": 173 }, { "x": -41.5, "y": 197 }, { "x": 316.5, "y": 152 }, { "x": 567.5, "y": -37 }, { "x": 526.5, "y": -169 }], [{ "x": -499.5, "y": 150 }, { "x": -450.5, "y": -43 }, { "x": -420.5, "y": -38 }, { "x": -291.5, "y": 5 }, { "x": 61.5, "y": 115 }, { "x": -47.5, "y": -76 }, { "x": 38.5, "y": -182 }, { "x": 155.5, "y": -298 }, { "x": 194.5, "y": 111 }, { "x": 381.5, "y": 43 }, { "x": 515.5, "y": -14 }], [{ "x": -553.5, "y": 205 }, { "x": -409.5, "y": 126 }, { "x": -135.5, "y": 184 }, { "x": 130.5, "y": -5 }, { "x": 226.5, "y": -152 }, { "x": 522.5, "y": -165 }], [{ "x": -521.5, "y": -294 }, { "x": -195.5, "y": -211 }, { "x": -285.5, "y": 189 }, { "x": 110.5, "y": 149 }, { "x": 291.5, "y": 91 }, { "x": 98.5, "y": -241 }, { "x": 486.5, "y": -327 }], [{ "x": -38.5, "y": 343 }, { "x": -158.5, "y": 247 }, { "x": -362.5, "y": 132 }, { "x": -131.5, "y": 74 }, { "x": 155.5, "y": 15 }, { "x": 301.5, "y": 47 }, { "x": 254.5, "y": -165 }, { "x": 91.5, "y": -301 }, { "x": -523.5, "y": -259 }], [{ "x": 310.5, "y": 347 }, { "x": -368.5, "y": 198 }, { "x": 177.5, "y": 60 }, { "x": 275.5, "y": 9 }, { "x": 351.5, "y": -38 }, { "x": 316.5, "y": -120 }, { "x": 87.5, "y": -230 }, { "x": -238.5, "y": -297 }, { "x": -536.5, "y": -128 }], [{ "x": -527.5, "y": 267 }, { "x": -488.5, "y": 49 }, { "x": -225.5, "y": 60 }, { "x": 40.5, "y": 223 }, { "x": 207.5, "y": 334 }], [{ "x": -499.5, "y": 292 }, { "x": -461.5, "y": 53 }, { "x": -375.5, "y": 288 }, { "x": -120.5, "y": 159 }, { "x": 80.5, "y": 45 }, { "x": 303.5, "y": 32 }, { "x": -189.5, "y": -82 }, { "x": -420.5, "y": -148 }, { "x": 541.5, "y": -242 }], [{ "x": 51.5, "y": 351 }, { "x": 220.5, "y": 171 }, { "x": 642.5, "y": 154 }, { "x": 128.5, "y": 69 }, { "x": -497.5, "y": -26 }, { "x": 80.5, "y": -366 }], [{ "x": -384.5, "y": 348 }, { "x": -366.5, "y": 144 }, { "x": -81.5, "y": 53 }, { "x": 16.5, "y": 25 }, { "x": 329.5, "y": -69 }, { "x": 290.5, "y": -393 }], [{ "x": -338.5, "y": 351 }, { "x": -516.5, "y": 232 }, { "x": -383.5, "y": 28 }, { "x": -62.5, "y": 42 }, { "x": 580.5, "y": 63 }, { "x": -191.5, "y": -336 }], [{ "x": -231.5, "y": 357 }, { "x": -131.5, "y": 178 }, { "x": -379.5, "y": 71 }, { "x": 59.5, "y": -54 }, { "x": 380.5, "y": -175 }, { "x": -86.5, "y": -156 }, { "x": 74.5, "y": -341 }], [{ "x": 393.5, "y": 346 }, { "x": 177.5, "y": 164 }, { "x": -86.5, "y": 152 }, { "x": -294.5, "y": -28 }, { "x": -341.5, "y": -127 }, { "x": 31.5, "y": -331 }], [{ "x": -495.5, "y": -140 }, { "x": -392.5, "y": -121 }, { "x": -353.5, "y": 139 }, { "x": -39.5, "y": 189 }, { "x": 267.5, "y": 184 }, { "x": 205.5, "y": 95 }, { "x": 505.5, "y": 47 }], [{ "x": -499.5, "y": 237 }, { "x": -454.5, "y": -64 }, { "x": -289.5, "y": -244 }, { "x": -103.5, "y": -196 }, { "x": 36.5, "y": -88 }, { "x": 57.5, "y": 53 }, { "x": 185.5, "y": 111 }, { "x": 290.5, "y": 157 }, { "x": 391.5, "y": 122 }, { "x": 494.5, "y": 22 }], [{ "x": 505.5, "y": 225 }, { "x": 353.5, "y": -178 }, { "x": 20.5, "y": 81 }, { "x": -83.5, "y": -23 }, { "x": -276.5, "y": -162 }, { "x": -426.5, "y": 28 }, { "x": -499.5, "y": 128 }], [{ "x": 586.5, "y": -61 }, { "x": 213.5, "y": -102 }, { "x": 402.5, "y": 104 }, { "x": 263.5, "y": 129 }, { "x": -81.5, "y": 201 }, { "x": -236.5, "y": 150 }, { "x": -225.5, "y": -20 }, { "x": -120.5, "y": -301 }, { "x": -564.5, "y": -30 }], [{ "x": 498.5, "y": -248 }, { "x": 372.5, "y": -109 }, { "x": 155.5, "y": 154 }, { "x": 10.5, "y": 35 }, { "x": -139.5, "y": -90 }, { "x": -435.5, "y": 11 }, { "x": -523.5, "y": 299 }], [{ "x": 453.5, "y": 344 }, { "x": 333.5, "y": 109 }, { "x": 237.5, "y": 209 }, { "x": 55.5, "y": 71 }, { "x": -62.5, "y": -75 }, { "x": -373.5, "y": 63 }, { "x": -495.5, "y": 149 }]]
    private _editPath = false
    // private _paths = []
    private _pathGraphics: cc.Graphics = null
    private _bezier: Bezier = null
    private _showAll = false

    curPos: cc.Node = null;
    start() {
        this._pathGraphics = this.getComponent(cc.Graphics)
        this._GraphicsClear()
        let c = this.getComponent(cc.Canvas)
        c.node.on(cc.Node.EventType.TOUCH_START, this._onTouch, this)
        this._bezier = new Bezier
        this.updateTipsTxt("点击加入【添加路径】开始编辑")
    }

    private _onTouch(e: cc.Event.EventTouch) {
        if (!this._editPath) return
        let posNode = this._addPosNode(this.node.convertToNodeSpaceAR(e.getLocation()), this._posNode.length + "")
        this._posNode.push(posNode)
        this.curPos = posNode
        this.fillPath()

    }

    private _updateCurNode(e: cc.Event.EventTouch) {
        let posNode = e.currentTarget as cc.Node
        this.curPos = posNode
        for (let node of this._posNode)
            if (node == posNode)
                node.color = cc.Color.BLUE
            else
                node.color = cc.Color.WHITE
        if (this._showAll) {
            this._editPath = false
            this.fillAllPath()
            this._editPath = true
            for (let i = 0; i < this._paths[posNode.zIndex].length; i++) {
                this._posNode.push(this._addPosNode(this._paths[posNode.zIndex][i], i + ""))
            }
            this._paths.splice(posNode.zIndex, 1)
            this._clearTagNode()
            this.fillPath()
        }
    }

    private _onTouchNodeMove(e: cc.Event.EventTouch) {
        let posNode = e.currentTarget as cc.Node
        posNode.setPosition(this.node.convertToNodeSpaceAR(e.getLocation()))
        this.fillPath()
    }

    private _addPosNode(pos, str) {
        let posNode = cc.instantiate(this.posNode)
        this.node.addChild(posNode)
        posNode.setPosition(pos)
        posNode.getChildByName("lb").getComponent(cc.Label).string = str
        posNode.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchNodeMove, this)
        posNode.on(cc.Node.EventType.TOUCH_START, this._updateCurNode, this)
        return posNode
    }

    private clearLastPos(e, data) {
        for (let i = 0; i < this._posNode.length;) {
            if (this._posNode[i] == this.curPos) {
                this._destroy(this._posNode[i])
                this._posNode.splice(i, 1)
            } else {
                this._posNode[i].getChildByName("lb").getComponent(cc.Label).string = i + ""
                i++
            }
        }
        if (this._posNode.length) {
            this.curPos = this._posNode[this._posNode.length - 1]
            this.curPos.color = cc.Color.RED
        } else
            this.curPos = null

        this.fillPath()
    }

    addPath() {
        if (this._editPath) {
            this.updateTipsTxt("先保存当前路径")
            return
        }
        this.updateTipsTxt("点击加入控制点")
        this._editPath = true
        this._showAll = false
        this._GraphicsClear()
        this._clearTagNode()
    }

    svae() {
        if (this._posNode.length < 2) {
            this.updateTipsTxt("控制点过少")
            return
        }
        this._editPath = false
        let posList = this.getPosList()
        this._paths.push(posList)
        this.updateTipsTxt("点击加入【添加路径】开始编辑")
        this._posNode.forEach(node => this._destroy(node))
        this._posNode = []
        this._GraphicsClear()
    }

    _destroy(node) {
        node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchNodeMove, this)
        node.off(cc.Node.EventType.TOUCH_START, this._onTouchNodeMove, this)
        node.destroy()
    }

    fillAllPath() {
        if (this._editPath) {
            this.updateTipsTxt("先保存当前编辑路径")
            return
        }
        this._showAll = !this._showAll
        if (this._showAll)
            this.fillPath()
        else {
            this._GraphicsClear()
            this._clearTagNode()
        }
    }

    private _GraphicsClear() {
        this._pathGraphics.clear()
        this._drawRect()
    }

    private _drawRect() {
        this._pathGraphics.lineWidth = 1
        this._pathGraphics.moveTo(-480, -320)
        this._pathGraphics.lineTo(-480, 320)
        this._pathGraphics.lineTo(480, 320)
        this._pathGraphics.lineTo(480, -320)
        this._pathGraphics.lineTo(-480, -320)
        this._pathGraphics.fillColor = cc.Color.YELLOW
        this._pathGraphics.stroke()
    }

    private _clearTagNode() {
        this._pathTagNodes.forEach(node => this._destroy(node))
        this._pathTagNodes = []
    }

    fillPath() {
        let cltPosList = []
        if (this._showAll) {
            cltPosList = this._paths
        } else {
            if (this.getPosList().length)
                cltPosList[0] = this.getPosList()
        }
        if (!cltPosList.length) return
        this._GraphicsClear()
        this._clearTagNode()
        for (let index = 0; index < cltPosList.length; index++) {
            if (this._showAll) {
                let posNode = this._addPosNode(cltPosList[index][0], index + "")
                this._pathTagNodes.push(posNode)
                posNode.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchNodeMove, this)
                posNode.on(cc.Node.EventType.TOUCH_START, this._updateCurNode, this)
                posNode.zIndex = index
            }

            this._bezier.setPath(cltPosList[index])
            this._bezier.bRunEnd = false
            let line = this._pathGraphics
            //设置线条宽度
            line.lineWidth = 2;
            //设置线条颜色
            line.strokeColor = cc.color(Math.random() * 200 + 55, Math.random() * 200 + 55, Math.random() * 200 + 55);
            let paths = this._bezier.getPos(0)
            line.moveTo(paths.x, paths.y)
            while (!this._bezier.bRunEnd) {
                paths = this._bezier.getPos()
                line.lineTo(paths.x, paths.y);
            }
            line.stroke();

            if (this._editPath) {
                line.lineWidth = 1;
                line.strokeColor = cc.Color.GRAY;
                for (let i = 0; i < cltPosList[index].length; i++) {
                    if (i === 0) {
                        //创建线条起始点
                        line.moveTo(cltPosList[index][i].x, cltPosList[index][i].y);
                    }
                    else {
                        //与前一段线条相连
                        line.lineTo(cltPosList[index][i].x, cltPosList[index][i].y);
                    }
                }

                let poss = this.getPosList()
                if (poss.length == 4) {
                    line.moveTo(poss[0].x, poss[0].y);
                    line.bezierCurveTo(poss[1].x, poss[1].y, poss[2].x, poss[2].y, poss[3].x, poss[3].y)
                    line.stroke();
                }
                line.stroke();
            }
        }
    }

    // fill() {
    //     let line = this._pathGraphics
    //     //设置线条宽度
    //     line.lineWidth = 2;
    //     line.strokeColor = cc.color(Math.random() * 200 + 55, Math.random() * 200 + 55, Math.random() * 200 + 55);
    //     //设置线条颜色
    //     let r = 40 //半径
    //     let origin = cc.v2(0.0) //起点
    //     let x = Math.sin(Math.PI / 3) * r //平行线的距离
    //     for (let i = 0; i < 10; i++) {
    //         origin.y += r + r / 2
    //         origin.x = i % 2 * x
    //         for (let j = 0; j < 10; j++) {
    //             line.moveTo(origin.x - x, origin.y + r / 2)//左上
    //             line.lineTo(origin.x, origin.y + r)//上
    //             line.lineTo(origin.x + x, origin.y + r / 2) //右上
    //             line.lineTo(origin.x + x, origin.y - r / 2)//右下
    //             line.lineTo(origin.x, origin.y - r)//下
    //             line.lineTo(origin.x - x, origin.y - r / 2)//左下
    //             line.lineTo(origin.x - x, origin.y + r / 2)//左上
    //             line.stroke();
    //             origin.x += x * 2
    //         }

    //     }
    // }

    getPosList(arr?) {
        let posList = []
        let arrData = arr ? arr : this._posNode
        for (let node of arrData)
            posList.push({ x: node.x, y: node.y })
        return posList
    }


    exportLocal() {
        if (this._editPath) {
            this.updateTipsTxt("先保存")
            return
        }
        if (cc.sys.isBrowser) {
            console.log("浏览器");
            let data = { ctlNum: this._bezier.ctlPosNum, smoothness: this._bezier.smoothness, pathNum: this._paths.length, posArr: this._paths } as any
            data = JSON.stringify(data)
            let textFileAsBlob = new Blob([data], { type: 'application/json' });
            let downloadLink = document.createElement("a");
            downloadLink.download = this.edit2.getComponent(cc.EditBox).string;
            downloadLink.innerHTML = "Download File";
            if (window.webkitURL != null) {
                // Chrome allows the link to be clicked
                // without actually adding it to the DOM.
                downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            }
            else {
                // Firefox requires the link to be added to the DOM
                // before it can be clicked.
                downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                // downloadLink.onclick = destroyClickedElement;
                downloadLink.style.display = "none";
                document.body.appendChild(downloadLink);
            }
            downloadLink.click();
        }
    }

    updateCtlPosNum() {
        if (this.edit1.getComponent(cc.EditBox).string == "n") {
            this._bezier.ctlPosNum = null
            return
        }
        let num = parseInt(this.edit1.getComponent(cc.EditBox).string)
        if (!num) return
        this._bezier.ctlPosNum = num
        this.fillPath()
    }

    updateSmoothness() {
        let num = parseInt(this.edit0.getComponent(cc.EditBox).string)
        if (!num) return
        this._bezier.smoothness = num
        this.fillPath()
    }

    private _count = 0
    private clearAllPath() {
        this._count++
        this.btnDelete.getComponentInChildren(cc.Label).string = "点击删除"
        if (this._count > 1) {
            this._paths = []
            this._count = 0
            this.btnDelete.getComponentInChildren(cc.Label).string = "删除所有路径"
            this._GraphicsClear()
            this._clearTagNode()
        }
    }

    private updateTipsTxt(str) {
        this.Label.getComponent(cc.Label).string = str
    }
}
